<template>
  <div>
    <m-button v-if="type != 'picture' && fileList.length == limit" disabled>{{ btnText }}</m-button>
    <el-upload
      v-else
      ref="upload"
      :auto-upload="auto"
      :show-file-list="false"
      :accept="accept"
      :action="action"
      :headers="headers"
      :limit="limit"
      :multiple="limit != 1"
      :file-list="fileList"
      :on-exceed="handleExceed"
      :on-change="handleChange"
      :on-remove="handleRemove"
    >
      <m-button :icon="icon">{{ btnText }}</m-button>
    </el-upload>
    <slot name="notice"></slot>

    <ul v-if="type == 'file'" class="el-upload-list el-upload-list--text">
      <li
        class="el-upload-list__item is-success"
        v-for="(item, index) in fileList"
        :key="index"
        @click="downloadFile(item.fileId)"
      >
        <a class="el-upload-list__item-name">
          <i class="el-icon-document"></i>
          {{ item.name }}
        </a>
        <label class="el-upload-list__item-status-label">
          <i class="el-icon-upload-success el-icon-circle-check"></i>
        </label>
        <i class="el-icon-close" @click.stop="handleRemove(item, index)"></i>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'MUpload',
  props: {
    auto: {
      type: Boolean,
      default: false,
    },
    btnText: {
      type: String,
      default: '上传附件',
    },
    limit: {
      type: Number,
      default: 99,
    },
    size: {
      type: Number,
      default: 99999,
    },
    accept: {
      type: String,
      default: '',
    },
    downloadAble: {
      // 非编辑状态下，兼容下载
      type: Boolean,
      default: false,
    },
    icon: {
      type: String,
      default: '',
    },
    type: {
      type: String,
      default: 'file',
    },
  },
  data() {
    return {
      fileList: [],
      pending: false,
    }
  },
  computed: {
    action() {
      return this.$config.server + this.$api.uploadFile
    },
    headers() {
      return {
        Authorization: this.$state['AUTH_SIGN'],
      }
    },
  },
  methods: {
    init() {
      this.$utils.resetDataByKey.call(this, 'fileList')
    },
    handleExceed(file, fileList) {
      this.$message.warning(`仅可上传${this.limit}个文件`)
    },
    autoClearFileList() {
      this.$refs['upload'].clearFiles()
    },
    validFile(file) {
      return new Promise((resolve, reject) => {
        const sizeLimit = file.size / 1024 / 1024 < this.size
        if (!sizeLimit) {
          this.autoClearFileList()
          reject('上传文件大小超出限制，请检查')
        }
        resolve()
      })
    },
    handleChange(file, fileList) {
      this.pending = true
      if (file.status == 'ready') return
      this.validFile(file)
        .then(() => {
          this.fileList = this.type == 'picture' ? [file] : fileList
          this.pending = false
          this.$emit('change')
        })
        .catch(err => {
          this.pending = false
          this.autoClearFileList()
          this.$message.warning(err)
        })
    },
    handleRemove(item, index) {
      this._confirm
        .call(this, {
          content: `确定删除${item.name}吗？`,
          confirmText: '删除',
        })
        .then(next => {
          this.fileList.splice(index, 1)
          next()
        })
    },
    downloadFile(fileId) {
      this.downloadAble && this.$utils.downloadFile(fileId)
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep {
  .el-upload {
    display: inline;
    text-align: center;
    cursor: pointer;
    outline: 0;
  }
  .el-upload-list {
    margin-top: 10px;
    max-height: 50vh;
    // overflow-y: scroll;
  }
}
.m-upload-picture {
  width: 460px;
  height: auto;
}
</style>
